<template>
  <div style="max-width: 700px; margin: 32px auto">
    <h2>前端安全专题 Demo</h2>

    <!-- XSS 攻击演示 -->
    <section style="margin: 24px 0">
      <h3>XSS 攻击与防御</h3>
      <el-input
        v-model="xssInput"
        placeholder="尝试输入：<img src=1 onerror=alert(1)>"
      />
      <div style="margin: 8px 0">
        <el-checkbox v-model="enableXssSanitize"
          >开启 XSS 防御（自动转义）</el-checkbox
        >
      </div>
      <div style="padding: 12px; background: #f8f8fa; border: 1px solid #eee">
        <b>渲染效果：</b>
        <div
          v-if="enableXssSanitize"
          v-text="xssInput"
          style="color: #2d8cf0"
        ></div>
        <div v-else v-html="xssInput" style="color: #f56c6c"></div>
      </div>
      <div style="font-size: 12px; color: #999; margin-top: 4px">
        开关“XSS防御”观察两种渲染的不同（v-text 安全，v-html 需谨慎）。
      </div>
    </section>

    <h2>XSS 攻击实验室（存储型/反射型/钓鱼表单）</h2>
    <!-- 1. 存储型 XSS Demo -->
    <section style="margin: 30px 0">
      <h3>存储型 XSS</h3>
      <el-input
        v-model="storageXssInput"
        placeholder="留言板：输入任何内容，试试插入 <img src=1 onerror=alert(1)>"
        style="width: 400px"
      />
      <el-button
        @click="submitStorageXss"
        type="primary"
        size="small"
        style="margin-left: 10px"
        >留言</el-button
      >
      <div style="margin-top: 12px">
        <b>留言区：</b>
        <div
          v-for="(msg, idx) in storageMsgs"
          :key="idx"
          style="padding: 4px 0; border-bottom: 1px solid #eee"
        >
          <span v-html="msg"></span>
          <!-- 模拟服务端未转义直接存储渲染，XSS风险 -->
        </div>
      </div>
      <div style="color: #999; font-size: 12px">
        注：留言内容未做转义，已存储后多次渲染可被攻击。
      </div>
    </section>

    <!-- 2. 反射型 XSS Demo -->
    <section style="margin: 30px 0">
      <h3>反射型 XSS</h3>
      <div>
        <el-input
          v-model="reflectXssQuery"
          placeholder="在URL参数输入恶意代码（如 <img src=1 onerror=alert(1)>）"
          style="width: 360px"
        />
        <el-button
          @click="doReflectXss"
          type="primary"
          size="small"
          style="margin-left: 10px"
          >模拟跳转</el-button
        >
      </div>
      <div style="margin-top: 12px">
        <b>搜索结果：</b>
        <div v-html="reflectXssResult" style="color: #f56c6c"></div>
      </div>
      <div style="color: #999; font-size: 12px">
        注：用户输入内容未过滤直接插入页面，容易被 URL 恶意脚本注入
      </div>
    </section>

    <!-- 3. 钓鱼表单 Demo -->
    <section style="margin: 30px 0">
      <h3>钓鱼表单（伪造登录）</h3>
      <div
        style="
          border: 1px solid #f90;
          padding: 20px 28px;
          border-radius: 8px;
          max-width: 340px;
          background: linear-gradient(#fffbe6, #fff);
        "
      >
        <form @submit.prevent="phishingSubmit">
          <div style="margin-bottom: 12px">
            <el-input v-model="phish.username" placeholder="用户名/手机号" />
          </div>
          <div style="margin-bottom: 12px">
            <el-input
              v-model="phish.password"
              placeholder="密码"
              type="password"
            />
          </div>
          <el-button native-type="submit" type="danger">登录</el-button>
        </form>
        <div v-if="phishingHint" style="margin-top: 8px; color: #f56c6c">
          {{ phishingHint }}
        </div>
      </div>
      <div style="color: #999; font-size: 12px; margin-top: 4px">
        注：钓鱼页可伪造任何品牌样式，表单可收集用户敏感信息。<br />
        防护要点：防跳转/防 iframe/地址栏校验/多因子验证等。
      </div>
    </section>

    <!-- 脱敏演示 -->
    <section style="margin: 24px 0">
      <h3>敏感信息脱敏</h3>
      <el-input v-model="phone" placeholder="手机号示例" style="width: 220px" />
      <div style="margin: 8px 0">
        脱敏后：
        <span style="color: #2d8cf0">{{ maskPhone(phone) }}</span>
        <el-button @click="copyText(maskPhone(phone))" size="small"
          >复制</el-button
        >
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from "vue";
// XSS Demo
const xssInput = ref("<img src=1 onerror=alert(1)>");
const enableXssSanitize = ref(true);

// 存储型XSS
const storageXssInput = ref("");
const storageMsgs = ref([]); // 模拟留言数据库
function submitStorageXss() {
  if (storageXssInput.value) {
    storageMsgs.value.push(storageXssInput.value); // 直接存储未过滤，模拟服务端XSS漏洞
    storageXssInput.value = "";
  }
}

// 反射型XSS
const reflectXssQuery = ref("");
const reflectXssResult = ref("");
function doReflectXss() {
  // 演示反射型XSS（直接拼接用户输入到页面，无过滤）
  reflectXssResult.value = "你搜索的内容是：" + reflectXssQuery.value;
}

// 钓鱼表单
const phish = ref({ username: "", password: "" });
const phishingHint = ref("");
function phishingSubmit() {
  phishingHint.value = `已被钓鱼收集！用户名：${phish.value.username}，密码：${phish.value.password}`;
}

// 脱敏 Demo
const phone = ref("13812345678");
const maskPhone = (str) => str.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
// 复制
function copyText(text) {
  navigator.clipboard.writeText(text);
}
</script>
